<template>
    <el-dialog title="住客姓名" :visible.sync="dialogTableVisible" custom-class="pay-dialog">
        <div class="row_radio" style="margin-bottom: 15px">
            <el-radio v-model="radio" label="1">自定义</el-radio>
            <el-radio v-model="radio" label="2">复制</el-radio>
        </div>
        <div class="form" v-show="this.radio == '1'">
            <el-input v-model="user" placeholder="输入住客姓名" style="width: 100%;margin-top: 20px"></el-input>
        </div>
        <div class="copy" v-show="this.radio == '2'">
            <div class="top" style="display: flex">
                <el-input v-model="input" placeholder="请输入用户账号" style="width: 50%"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search" style="margin-left: 15px;width: 12%">搜索</el-button>
            </div>

            <div class="list" style="margin-top: 10px">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        border
                        stripe
                        align="center"
                        tooltip-effect="dark"
                        :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                        style="width: 100%;font-size: 14px;color: #1f2d3d;margin: auto"
                        v-loading="loading">
                    <el-table-column
                            prop="id"
                            label="ID"
                            align="center"
                            width="65">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户账号"
                            align="center"
                            min-width="12%">
                    </el-table-column>
                    <el-table-column
                            prop="homeaddress"
                            label="家庭住址"
                            show-overflow-tooltip
                            min-width="15%"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类型"
                            min-width="10%"
                            :formatter="typeFormatter"
                            align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="4%">
                        <template slot-scope="scope">
                            <i class="fa fa-plus-circle success-color fa-lg"
                               style="cursor:pointer;color: #42b983"
                               @click="handleChoose(scope.$index, scope.row)"
                            ></i>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @current-change="handleCurrentChange"
                                   layout="total, sizes,prev, pager, next"
                                   :current-page.sync="iPagination.current"
                                   :page-size='iPagination.pageSize'
                                   :page-sizes="iPagination.pageSizeOptions"
                                   :total="iPagination.total"
                                   @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </div>


            <div class="result-title" style="font-size: 20px;font-weight: bold;color: #303133;margin-top: 40px">已选结果</div>
                <el-table
                        ref="multipleTable"
                        :data="selectList"
                        border
                        stripe
                        align="center"
                        tooltip-effect="dark"
                        style="width: 100%;font-size: 14px;color: #1f2d3d;margin: auto;margin-top: 10px"
                        v-loading="loading">
                    <el-table-column
                            prop="id"
                            label="ID"
                            align="center"
                            width="65">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户账号"
                            align="center"
                            min-width="12%">
                    </el-table-column>
                    <el-table-column
                            prop="homeaddress"
                            label="家庭住址"
                            show-overflow-tooltip
                            min-width="15%"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类型"
                            min-width="10%"
                            :formatter="typeFormatter"
                            align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="4%">
                        <template slot-scope="scope">
                            <i class="fa fa-minus-circle fa-lg danger-color el-tooltip el-clicked-icon item"
                               @click="handleDelete(scope.$index, scope.row)"
                               style="color: red;cursor: pointer"
                            ></i>
                        </template>
                    </el-table-column>
                </el-table>

        </div>
        <span slot="footer"
              class="dialog-footer" style="float: right">
            <el-button type="primary"
                       class="full-width"
                       @click="close">取消</el-button>
            <el-button v-show="this.radio == '1'"
                       type="primary"
                       class="full-width"
                       @click="confirm">确定</el-button>
            <el-button v-show="this.radio == '2'"
                       type="primary"
                       class="full-width"
                       @click="save">选择</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "numDialog",
        data(){
            return{
                radio: '1',
                user: '',
                h_id:'',
                input:'',
                tableData: [],
                selectList: [],
                dialogTableVisible: false,
                formData:{},
                table: false,
                loading: false,
                iPagination: {
                    current: 1,
                    pageSize: 7,
                    pageSizeOptions: [7, 10, 20, 30],
                    total: 0,
                    "page": 0,
                    "pageSize": 7,
                },
                multipleSelection: []
            }
        },
        mounted(){
          this.getData()
        },
        methods:{
            // 取消
            close(){
                this.dialogTableVisible = false
            },
            // 分页
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getData()
            },
            getData(){
                this.loading = true;
                this.$Axios({
                    url: '/users/getUserList',
                    method: 'get',
                    data:{
                        username: this.input,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 查询
            search(){
                this.iPagination.current = 1;
                this.getData()
            },
            // 选择按钮
            // handleSelectionChange(val) {
            //     this.multipleSelection = val;
            //     console.log(this.multipleSelection, 222)
            // },
            // 保存
            save(){
                // 向父组件传值
                this.$emit( 'sendMessage' ,  this.selectList );
                this.$axiosToken({
                    url: '/house/updateUserHid',
                    method: 'post',
                    data:{
                        id: this.selectList[0].id,
                        h_id: this.h_id
                    },
                    success: (result)=>{
                    }
                });
                this.close()
            },
            // 确定
            confirm(){
                this.$parent.form.homeName = this.user;
                this.close();
            },

            // 已选择
            handleChoose(index,row){
                if (row.homeaddress != ''){
                    this.$notify({
                        title: '提示',
                        message: '目前 【'+row.username+'】 已录入房屋信息，请勿重复操作',
                        type: 'warning'
                    });
                }else if(this.selectList.length > 0){
                    this.$notify({
                        title: '提示',
                        message: '已选择['+this.selectList[0].username+']，若要重新选择，请移除已选结果',
                        type: 'warning'
                    });
                }else {
                    this.selectList = [row]
                }
            },
            // 删除已选
            handleDelete(index,row){
                this.selectList.splice(index, 1);
            },

            // 类型转中文
            typeFormatter(row,column){
                const type = row.type
                if (type == 1){
                    return '管理员'
                }else {
                    return '普通用户'
                }
            },
        }
    }
</script>

<style scoped>
    .block{
        float: right;
        margin-top: 10px;
    }
    /deep/.el-dialog__title{
        font-size: 20px;
        color: #303133;
        font-weight: bolder
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    .el-button{
        width: 60px;
        height: 36px;
        font-size: 14px;
    }
    /deep/.el-drawer__header>:first-child {
        flex: 1;
        font-weight: bold;
        color: black;
        font-size: 20px;
    }
    /deep/.pay-dialog{
        width: 900px;
        margin: auto;
        overflow: auto;
        bottom: 13%;
    }
    /deep/.el-dialog__body {
        padding: 10px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }
    /deep/.el-dialog__footer {
        padding: 15px 25px 0px;
        text-align: right;
        box-sizing: border-box;
        padding-bottom: 50px;
    }
    .full-width{
        width: 80px;
        margin-left: 15px;
    }
</style>